<template>
  <div class="main">
    <div class="left">
      <p><b>个人成绩</b></p>
      <div style="width:300px;height: 100px;background-color:	#ADD8E6;">
      <p class="text">姓名:刘贵佳</p>
      <p class="text">专业班级:软件13班</p>
      <p class="text">学号:2020035107456</p>
      </div>
      <div style="width:100px;height: 100px;background-color:#ADD8E6;margin-top: 20px;">
      <p class="text">作业完成率</p>
      <p class="text1">100%</p>
      </div>
      <div style="width:100px;height: 100px;background-color:#ADD8E6;margin-top: 20px;">
      <p class="text">及格率</p>
      <p class="text1">100%</p>
      </div>
      <div style="width:100px;height: 100px;background-color:#ADD8E6;margin-top: 20px;">
      <p class="text">不及格率</p>
      <p class="text1">100%</p>
      </div>
      <div style="width:100px;height: 100px;background-color:#ADD8E6;margin-top: 20px;">
      <p class="text">平均分</p>
      <p class="text1">100%</p>
      </div>
      <div style="position: absolute;left: 200px;top: 197px;">
        <div style="width:100px;height: 100px;background-color:#ADD8E6;margin-top: 20px;">
        <p class="text">参加次数</p>
        <p class="text1">100%</p>
        </div>
        <div style="width:100px;height: 100px;background-color:#ADD8E6;margin-top: 20px;">
        <p class="text">缺考次数</p>
        <p class="text1">100%</p>
        </div>
        <div style="width:100px;height: 100px;background-color:#ADD8E6;margin-top: 20px;">
        <p class="text">优秀率</p>
        <p class="text1">100%</p>
        </div>
      </div>
    </div>
    <div class="right">
      <div id="main" style="height:300px;width:1100px;position: absolute;left:450px;top:80px;">
      </div>
      <div id="main1" style="height:300px;width:1100px;position: absolute;left:450px;top: 340px;">
      </div>
    </div>
  </div>

</template>
<script>

import * as echarts from 'echarts'
export default {
  data() {
    return {}
  },
  mounted() {
    this.initCharts(),
      this.initCharts1()
  },
  methods: {
    initCharts() {
      // 初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'))
      // 绘制图表
      myChart.setOption({
        title: {
          
        },
        tooltip: {},
        xAxis: {
          data: ['1', '', '2', '', '3', '']
        },
        yAxis: {},
        series: [
          {
            name: '成绩',
            type: 'bar',
            data: [78, 0, 36, 0, 50, ]
          }
        ]
      })
    },
    initCharts1() {
      // 初始化echarts实例
      var myChart = echarts.init(document.getElementById('main1'))
      // 绘制图表
      myChart.setOption({
        title: {
         
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: ['1', '2', '3']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [90, 110, 160],
            type: 'line'
          }
        ]
      })
    }
  }
}
</script>
<style>
.main {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.left {
  width: 50%;
  height: 80%;
  flex-flow: row;
}

.right {
  width: 50%;
  height: 80%;

}
.text{
  text-align: center;
  padding-top: 10px;
}
.text1{
  padding-top: 20px;
  text-align: center;
}
</style>